﻿@page "/fieldset"
@page "/docs/guides/components/fieldset.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Fieldset
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Fieldset</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo a collapsible <strong>Orders</strong> fieldset uses <code>HeaderTemplate</code> with icon and title, <code>ChildContent</code> with a <code>RadzenDataList</code> showing order cards with employee photos and shipping info, and <code>SummaryTemplate</code> displaying total order count, with <code>Expand</code>/<code>Collapse</code> events logged to console.
</RadzenText>

<RadzenExample ComponentName="Fieldset" Example="FieldsetConfig">
    <FieldsetConfig />
</RadzenExample>

<RadzenText Anchor="fieldset#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Fieldset component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Fieldset expand/collapse toggle icon." },
        new KeyboardShortcut { Key = "Space or Enter", Action = "Expand or collapse the Fieldset." }
    };
}
